<template>
  <view class="payment-container">
    <view class="payment-info">
      <view class="title">支付信息</view>
      <view class="info-item">
        <text class="label">医院</text>
        <text class="value">{{ appointmentInfo.hospitalName }}</text>
      </view>
      <view class="info-item">
        <text class="label">科室</text>
        <text class="value">{{ appointmentInfo.departmentName }}</text>
      </view>
      <view class="info-item">
        <text class="label">医生</text>
        <text class="value">{{ appointmentInfo.doctorName }}</text>
      </view>
      <view class="info-item">
        <text class="label">就诊时间</text>
        <text class="value">{{ formatDate(appointmentInfo.appointmentDate) }} {{ appointmentInfo.appointmentTime === 'morning' ? '上午' : '下午' }}</text>
      </view>
      <view class="info-item">
        <text class="label">挂号费</text>
        <text class="value price">￥50.00</text>
      </view>
    </view>

    <view class="qr-section" v-if="showQR">
      <image class="qr-code" src="/static/images/payment-qr.png" mode="aspectFit"></image>
      <text class="qr-tip">请使用微信扫码支付</text>
      <text class="countdown">{{ countdown }}s后自动支付完成</text>
    </view>

    <view class="bottom-button" v-if="!showQR">
      <button class="confirm-btn" @tap="showPaymentQR">确认支付</button>
    </view>
  </view>
</template>

<script>
import { getAppointmentList, payAppointment } from '@/api/appointment'

export default {
  data() {
    return {
      appointmentId: '',
      userId: '',
      appointmentInfo: {},
      showQR: false,
      countdown: 3
    }
  },

  onLoad(options) {
    this.appointmentId = options.appointmentId
    this.userId = options.userId
    this.getAppointmentInfo()
  },

  methods: {
    // 获取预约信息
    async getAppointmentInfo() {
      try {
        const list = await getAppointmentList(this.userId)
        this.appointmentInfo = list.find(item => item.id === Number(this.appointmentId))
      } catch (error) {
        uni.showToast({
          title: '获取预约信息失败',
          icon: 'none'
        })
      }
    },

    // 显示支付二维码
    showPaymentQR() {
      this.showQR = true
      this.startCountdown()
    },

    // 开始倒计时
    startCountdown() {
      const timer = setInterval(async () => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
          // 模拟支付完成
          try {
            await payAppointment(this.appointmentId, this.userId)
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } catch (error) {
            uni.showToast({
              title: error || '支付失败',
              icon: 'none'
            })
          }
        }
      }, 1000)
    },

    formatDate(dateStr) {
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
      return `${year}-${month}-${day} ${weekDay}`
    }
  }
}
</script>

<style lang="scss">
.payment-container {
  padding: 30rpx;
  
  .payment-info {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .label {
        color: #666;
        font-size: 28rpx;
      }
      
      .value {
        color: #333;
        font-size: 28rpx;
        
        &.price {
          color: #f5222d;
          font-weight: bold;
        }
      }
    }
  }
  
  .qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    background: #fff;
    border-radius: 16rpx;
    
    .qr-code {
      width: 400rpx;
      height: 400rpx;
      margin-bottom: 30rpx;
    }
    
    .qr-tip {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .countdown {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .bottom-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
    
    .confirm-btn {
      background: #1890ff;
      color: #fff;
      border-radius: 44rpx;
      font-size: 32rpx;
      height: 88rpx;
      line-height: 88rpx;
    }
  }
}
</style> 